<template>
  <div>
    <div class="goodlist">
      <router-link to="/goodsinfo" class="goods">
        <img src="../../img/timg.jpg">
        <h1>华为p20 pro(6gb ram/全网通)</h1>
        <div class="info">
          <p class="price">
            <span class="old">￥59999</span>
            <span class="now">￥69999</span>
          </p>
          <p class="sell">
            <span>热卖中</span>
            <span>剩余1件</span>
          </p>
        </div>
      </router-link>
        <div class="goods">
       <img src="../../img/timg.jpg">
      <h1>华为p20 pro(6gb ram/全网通)</h1>
      <div class="info">
        <p class="price">
          <span class="old">￥59999</span>
          <span class="now">￥69999</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩余1件</span>
        </p>
      </div>
    </div>
        <div class="goods">
      <img src="../../img/timg.jpg">
      <h1>华为p20 pro(6gb ram/全网通)</h1>
      <div class="info">
        <p class="price">
          <span class="old">￥59999</span>
          <span class="now">￥69999</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩余1件</span>
        </p>
      </div>
    </div>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

.goodlist{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 3px 7px;

}
.goods{
  width: 49%;
  height: 220px;
  border: 1px #ccc solid;
  box-shadow: 0 0 6px;
  margin: 3px 0;
  font-size: 12px;
  position: relative;

}
.goods img{
  width: 100%;

}
.info{
  width: 100%;
  background-color: #eee;
  position: absolute;
  bottom: 0;

}
.price{
  padding: 10px 0;
}
.now{
  text-decoration: line-through;

}
.old{
  color: red;
  font-weight: bold;
  font-size: 14px;
  margin:3px 10px;
}
.sell{
  display: flex;
  justify-content: space-between;
  padding: 3px 10px;
}
</style>

